<template>
  <!--  新增按钮-->
  <div>
    <div>
      <el-button type="primary" size="mini" @click="addmenu">新增</el-button>
    </div>
    <el-divider></el-divider>
    <!--查所有菜单-->
    <el-table :data="tableData">
      <el-table-column prop="name" label="菜单名称" width="130" />
      <!--        <el-table-column prop="icon" label="图标" width="130" />-->
      <el-table-column prop="sort" label="排序" width="130" />
      <el-table-column prop="path" label="组件路径" width="130" />
      <el-table-column prop="type" label="类型" width="130">
        <template #default="scope">
          <el-tag :type="scope.row.type === 1 ? 'danger' : 'success'">
            {{ scope.row.type === 1 ? '目录' : '菜单' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="keepAlive" label="缓冲" width="130">
        <template #default="scope">
          <el-tag :type="scope.row.keepAlive === 1 ? 'success' : 'danger'">
            {{ scope.row.keepAlive === 1 ? '开启' : '关闭' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="permission" label="权限标识" width="130" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" size="small" @click="addfilst(scope.row)">
            新增
          </el-button>
          <el-button type="text" size="small" @click="updatefilst(scope.row)">
            编辑
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="delemenu(scope.row.menuId)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--新增弹窗-->
    <el-dialog
      v-model="dialogVisible"
      title="新增"
      width="500"
      :before-close="handleClose"
    >
      <template #footer>
        <div class="dialog-footer">
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="ruleForm.sort" />
          </el-form-item>
          <el-form-item label="组件路径" prop="path">
            <el-input v-model="ruleForm.path" />
          </el-form-item>
          <el-form-item label="类型" prop="checkPass">
            <el-select
              v-model="ruleForm.type"
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option label="目录" value="1" />
              <el-option label="菜单" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="缓冲" prop="checkPass">
            <el-select
              v-model="ruleForm.keepAlive"
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option label="开启" value="1" />
              <el-option label="关闭" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="权限标识" prop="permission">
            <el-input v-model="ruleForm.permission" />
          </el-form-item>

          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="savemenu()">
            添加
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getMenuList, removemenu, saveMenu } from '@/api/user/menu'
import { ElMessage } from 'element-plus'

const tableData = ref([])
function selemenu() {
  getMenuList().then(res => {
    console.log(res.data)
    tableData.value = res.data.data
  })
}
selemenu()

//新增
const dialogVisible = ref(false)
const ruleForm = ref({
  name: '',
  sort: '',
  path: '',
  type: '',
  keepAlive: '',
  permission: '',
})
const addmenu = () => {
  ruleForm.value = {}
  dialogVisible.value = true
}
function savemenu() {
  saveMenu(ruleForm.value).then(res => {
    console.log(res.data)
    if (res.code == 200) {
      dialogVisible.value = false
      ElMessage.success('添加成功')
      selemenu()
    }
  })
}
//删除
const delemenu = menuId => {
  removemenu(menuId).then(res => {
    console.log(res)
    if (res.code == 200) {
      ElMessage.success('删除成功')
      selemenu()
    }
  })
}
</script>
